﻿@model StockShark.ViewModels.InstrumentChartData

@{
    ViewBag.Title = ViewBag.Header = Model.Instrument.Name + " (" + Model.Instrument.Acronym + ")";
}

<script src="@Url.Content("~/Scripts/flot/jquery.flot.min.js")" type="text/javascript"></script>

<h4>@Html.DisplayFor(model => Model.Instrument.Description)</h4>

@if (ViewBag.Watched > 0)
{
    @Html.ActionLink("Usuń z obserwowanych", "Unwatch", "Home", new { item = Model.Instrument.Id, returnUrl = Request.Url }, null)
}
else
{
    @Html.ActionLink("Dodaj do obserwowanych", "Watch", "Home", new { item = Model.Instrument.Id, returnUrl = Request.Url }, null)
}


<ul>
<li>Rodzaj: <strong>@Html.DisplayFor(model => Model.Instrument.TypePL)</strong></li>
<li>Rynek: <strong>@Html.DisplayFor(model => Model.Instrument.Market)</strong></li>
@if (Model.Instrument.GetType().Name.Equals("Share"))
{
    <li>Sektor: <strong>@(((StockShark.Models.Share)Model.Instrument).Sector)</strong></li>
    <li>System notowań: <strong>@(((StockShark.Models.Share)Model.Instrument).Fixing ? "jednolite" : "ciągłe")</strong></li>
}
<li>Link zewnętrzny: <strong>@Html.DisplayFor(model => Model.Instrument.WebLink)</strong></li>
</ul>

<h4>Notowania</h4>
<ul>
<li>Kurs odniesienia: <strong>@Html.DisplayFor(model => Model.Instrument.ReferencePrice) @Model.Instrument.Unit</strong></li>
<li>Kurs bieżący:
@if (Model.Instrument.CurrentPrice > 0)
{
    if (Model.Instrument.CurrentPrice > Model.Instrument.ReferencePrice)
    {
        <strong class="pos">@Html.DisplayFor(modelItem => Model.Instrument.CurrentPrice) @Model.Instrument.Unit</strong>
    }
    else if (Model.Instrument.CurrentPrice < Model.Instrument.ReferencePrice)
    {
        <strong class="neg">@Html.DisplayFor(modelItem => Model.Instrument.CurrentPrice) @Model.Instrument.Unit</strong>
    }
    else
    {
        <strong>@Html.DisplayFor(modelItem => Model.Instrument.CurrentPrice) @Model.Instrument.Unit</strong>
    }
}
else
{ 
    <strong>---</strong>
}
</li>
<li>Zmiana: 
@if (Model.Instrument.CurrentPrice > 0)
{
    if (Model.Instrument.CurrentPrice > Model.Instrument.ReferencePrice)
    {
        <strong class="pos">@Html.DisplayFor(model => Model.Instrument.Change) @Model.Instrument.Unit 
        (@Html.DisplayFor(model => Model.Instrument.ChangePercent) %)</strong>
    }
    else if (Model.Instrument.CurrentPrice < Model.Instrument.ReferencePrice)
    {
        <strong class="neg">@Html.DisplayFor(model => Model.Instrument.Change) @Model.Instrument.Unit 
        (@Html.DisplayFor(model => Model.Instrument.ChangePercent) %)</strong>
    }
    else
    {
        <strong>@Html.DisplayFor(model => Model.Instrument.Change) @Model.Instrument.Unit 
        (@Html.DisplayFor(model => Model.Instrument.ChangePercent) %)</strong>
    }
}
else
{ 
    <strong>---</strong>
}
</li>

</ul>

<div id="periodSelect">
@using (Html.BeginForm("Details", "Quotations", FormMethod.Get))
{
    @Html.Hidden("item", Model.Instrument.Id)
    @Html.Label("period", "Okres ")
    @Html.DropDownList("period", (IEnumerable<SelectListItem>)ViewBag.PeriodSelectList)
}
</div>
<div id="pla"></div>


<script type="text/javascript">
function showTooltip(x, y, text) {
	var tooltip = $('<div id="tooltip">' + text + "</div>")


	tooltip.css({
        'left': x+4,
        'top': y-40,
        '-moz-border-radius': '4px',
        'border-radius': '4px',
		'position': 'absolute',
		'border': '1px solid #369',
		'padding': '2px',
		'background-color': '#eef',
		'opacity': 0.80,
		'z-index': 3,
		'pointer-events':'none',
		'display':'none'
	}).appendTo("body");
	tooltip.fadeIn(200);
}

$(function () {
    var dataset = @Model.GetFlotData();
    var ticks = @Html.Raw(Model.GetFlotTicks());
    var newTicks = [];
    var step = Math.floor(ticks.length / 10) + 1;
    for (var i = ticks.length-1; i >= 0; i-=step)
        newTicks.push(ticks[i]);

    $.plot($("#pla"), dataset, {
        xaxis: { ticks: newTicks, labelWidth: 100, min: -1, max: ticks.length },
        yaxis: { tickDecimals: 2 },
        series: { lines: { show: true,  fillColor: "rgba(238, 238, 255, 0.4)" }, points: { show: true, fill: true, radius: 2 }, color: "#369" },
        grid: { hoverable: true, backgroundColor: { colors: ["#efe", "#fee"] } }
    });

    $("#pla").bind("plothover", function (event, pos, item) {
        var lastCursor = '';
        if (item) {
			if (previousPoint != item.dataIndex) {
				previousPoint = item.dataIndex;
				$("#tooltip").remove();
				var x = item.datapoint[0];
				showTooltip(item.pageX, item.pageY, item.datapoint[1].toFixed(2) + " " + "@Model.Instrument.Unit" + "<br/>" + ticks[item.datapoint[0]][1]) // show tooltip
			}
		}
		else {
			$("#tooltip").remove();
			previousPoint = null;
		}
    });

    $("select#period").change(function() {
        $("form").submit();
    });
});
</script>

